<template>
  <div class="publish">
    <Myhead title="发布你的旅游日记"></Myhead>

    <div class="publish-steps">
      <van-steps direction="vertical" :active="active">
        <van-step class="publish-step">
          <h3>第一步</h3>
          <p>记录地点时间</p>
        </van-step>
        <van-step class="publish-step">
          <h3>第二步</h3>
          <p>记录旅游特点</p>
        </van-step>
        <van-step class="publish-step">
          <h3>第三步</h3>
          <p>记录旅游感受</p>
        </van-step>
      </van-steps>
    </div>

    <template v-if="active == 0">
      <div class="PublishingContent">
        <van-form @submit="nextstep">
          <van-cell-group class="Content-input" inset>
            <van-field required v-model="info.title" label="游记标题" placeholder="请输入标题"
              :rules="[{ required: true, message: '请填写' }]" label-align="top" />

            <van-field required v-model="info.address" label="游记地点" placeholder="请输入地点"
              :rules="[{ required: true, message: '请填写' }]" label-align="top" />

            <van-field label-align="top" :rules="[{ required: true, message: '请填写时间' }]" required v-model="info.date"
              is-link readonly name="datePicker" label="时间选择" placeholder="点击选择时间" @click="showPicker = true" />

            <van-popup v-model:show="showPicker" position="bottom">
              <van-date-picker option-height="80px" @confirm="onConfirm" @cancel="showPicker = false" />
            </van-popup>
          </van-cell-group>
        </van-form>
      </div>
    </template>

    <template v-if="active == 1">
      <div class="PublishingContent">
        <div class="paly">
          <p style="padding-top: 10px;">
            游玩标签<span>(最多6个)</span>
          </p>
          <div>
            <van-row>
              <van-col class="col" v-for="(item, index) in tag" :key="index" span="4">
                <van-tag :class="item.check === true ? 'normal_type' : 'chose_type'" @click="Playtags(index)"
                  type="primary">{{ item.label }}</van-tag>
              </van-col>
            </van-row>
          </div>
          <!-- 游玩图片 -->
          <div class="paly-pictures">
            <p style="padding-top: 10px; margin-top: 10px;">
              游玩图片<span>(最多6个)</span>
            </p>
            <van-uploader :after-read="upload" v-model="fileList" :deletable="false" multiple :max-count="6" />
          </div>
        </div>
      </div>
    </template>
    <template v-if="active == 2">
      <div class="PublishingContent">
        <van-cell-group inset>
          <van-field class="publish-field" label-align="top" v-model="info.content" rows="2" label="游记感受(用心记录)"
            type="textarea" maxlength="500" placeholder="请输入旅游感受" show-word-limit />
        </van-cell-group>
      </div>
    </template>

    <div class="publish-button">
      <van-row justify="space-around">
        <template v-if="active == 0">
          <van-col span="5">
            <van-button disabled type="primary">上一步</van-button>
          </van-col>
          <van-col span="5">
            <van-button @click="nextstep1" type="primary">下一步</van-button>
          </van-col>
        </template>

        <template v-if="active == 1">
          <van-col span="5">
            <van-button @click="laststep" type="primary">上一步</van-button>
          </van-col>
          <van-col span="5">
            <van-button @click="nextstep2" type="primary">下一步</van-button>
          </van-col>
        </template>

        <template v-if="active == 2">
          <van-col span="5">
            <van-button @click="laststep" type="primary">上一步</van-button>
          </van-col>
          <van-col span="5">
            <van-button @click="submit" type="success">提交吧</van-button>
          </van-col>
        </template>
      </van-row>
    </div>
  </div>
</template>


<script setup>
import { ref, reactive } from 'vue';
import moment from 'moment'
import { addtravelsAPI, uplodafileAPI } from './findapi'
import { showFailToast, showToast } from 'vant'
import { useRouter } from 'vue-router';

let router = useRouter()

let data = moment().format('L').split('/').reverse() //当前时间
let data1 = data[1]
let data2 = data[2]
data.splice(1, 2, data2, data1)

let active = ref(0);
let info = reactive({
  address: '', //游记标题
  title: '', //游记地点
  date: data, // 初始时间
  imgs: [], //上传图片
  tags: [], //上传标签
  content: '' //上传内容
})
let showPicker = ref(false);//时间开关
const fileList = ref([]); //图片


let tag = ref([  //游玩标签
  { label: "户外", value: 1, color: "#2db7f5", check: false },
  { label: "露营", value: 1, color: "#2db7f5", check: false },
  { label: "绿道", value: 1, color: "#2db7f5", check: false },
  { label: "爬山", value: 1, color: "#2db7f5", check: false },
  { label: "野钓", value: 1, color: "#2db7f5", check: false },
  { label: "滑雪", value: 1, color: "#2db7f5", check: false },
  { label: "古迹", value: 1, color: "#2db7f5", check: false },
  { label: "寺庙", value: 1, color: "#2db7f5", check: false },
  { label: "游乐场", value: 1, color: "#2db7f5", check: false },
  { label: "公园", value: 1, color: "#2db7f5", check: false },
  { label: "酒店", value: 1, color: "#2db7f5", check: false },
  { label: "漂流", value: 1, color: "#2db7f5", check: false },
  { label: "攀岩", value: 1, color: "#2db7f5", check: false },
  { label: "跳伞", value: 1, color: "#2db7f5", check: false },
  { label: "亲子", value: 1, color: "#2db7f5", check: false },
  { label: "轮渡", value: 1, color: "#2db7f5", check: false },
  { label: "农场", value: 1, color: "#2db7f5", check: false },
])


const Playtags = (i) => {
  if (info.tags.length < 6 && tag.value[i].check == false) {
    info.tags.push(tag.value[i])
    tag.value[i].check = true
  } else if (tag.value[i].check == true) {
    console.log(info.tags);
    console.log(info.tags.indexOf(tag.value[i]));
    info.tags.splice(info.tags.indexOf(tag.value[i]), 1)
    tag.value[i].check = false
  } else {
    showToast({
      message: '最多选择6个'
    })
  }
}

// 图片
const upload = async (el) => {
  const v = new FormData()
  v.append('file', el.file)
  let res = await uplodafileAPI(v)
  if (res.data.code == 200) {
    info.imgs.push({url:res.data.result})
  }
}

// 时间
const onConfirm = ({ selectedValues }) => {
  info.date = selectedValues.join(',')
  showPicker.value = false;
};


const laststep = () => {  // 上一步
  active.value--
}


const nextstep1 = () => {  // 1 下一步
  if (info.address && info.title && info.date) {
    active.value++
  } else {
    showFailToast('请输入有效数据')
  }
}

const nextstep2 = () => {  // 2 下一步
  console.log(info.imgs, info.tags);
  if (info.imgs.length > 0 && info.tags.length > 0) {

    console.log(fileList.value);
    active.value++
  } else {
    showFailToast('请输入有效数据')
  }
}


const submit = async () => {  //提交
  console.log(info.content);
  if (info.content) {
    
    let res = await addtravelsAPI(
      info
    )
    if (res.data.code == 200) {
    router.push('/find')
    }
  } else {
    showFailToast('请输入有效数据')
  }
}

</script>

<style lang="scss" scoped>
.publish {
  // height: 100%;
  padding-bottom: 40px;
}

.publish-steps {
  height: 30%;

  .publish-step {
    margin: 10px;
  }
}

.paly {
  padding-left: 20px;

  .paly-pictures {
    margin-top: 30px;
  }

  p {
    font-size: 16px;

    span {
      font-size: 12px;
    }
  }

  .col {
    margin-left: 5px;
    margin-top: 5px;
  }
}

.publish-field {
  height: 30%;
}

.PublishingContent {
  height: 40%;
  padding: 5px;
  border: 1px solid #f8f8f8;

  .Content-input {

    // width: 100%;
    .van-field {
      padding-left: 0;
    }
  }
}

.publish-button {
  height: 30%;
  padding-top: 40px;
}

.chose_type {
  background-color: #999;
  color: #fff;
}

.normal_type {
  background-color: #2db7f5;
  color: #fff;
}
</style>